/**
 *  基于jQuery，兼容到IE10；
 *  说明:轮播图盒子的宽高：box_w 、box_h,
 *       盒子中图片的数量：img_num,
 *       图片切换速度：speed，
 *       盒子必须由一个类名为carouselBox的div包裹
 * */
;(function () {
    function Carousel(target,config) {
        this.target = target;
        this.loop = 0;
        this.timer = null;
        this.config = {
            box_w:500,
            box_h:300,
            speed:2000,
            trigger_type:"mouseover"
        };
        if(JSON.stringify(config)=="{}"){
            alert("You need to define the parameter : config");
        } else if(config.img_num === undefined || config.img_num < 3){
            alert("You must set the img_num.And it must be larger than 3");
        }else {
            $.extend(this.config,config);
            this.setCss();
            this.autoPlay();
            this.bntClick();
            this.dotInvoke()
        }
    }
    Carousel.prototype = {
        setCss:function () {
            var t = this.target,
                len = this.config.img_num,
                w = this.config.box_w,
                h = this.config.box_h,
                s = "<style type='text/css' id='carousel-style'>.carouselBox{position:relative;overflow:hidden;width:" +
                    w +
                    "px;height:" +
                    h +
                    "px;}.carouselBox .carousel-ul{position: relative;width:" +
                    w*len +
                    "px;height:" +
                     h +
                    "px;}.carouselBox .carousel-li{float:left;} .carousel-nav-dots-wrap{position:absolute;width:" +
                    38*len +
                    "px;height:10px;left:50%;bottom:10px;margin-left:" +
                    -19*len +
                    "px;}.carousel-dot{font-size:0;display:inline-block;float:left;width:30px;height:5px;background-color:#dcdcdc;" +
                    "margin:0 4px;opacity:0.6;filter:alpha(opacity = 60);}.carousel-nav-dots-wrap .carousel-dot-on{background-color:#f40;opacity:1;filter:alpha(opacity = 100);}" +
                    ".carousel-bnt{display:none;position:absolute;top:50%;margin-top:-25px;width:50px;height:50px;color:#fff;font-size:40px;font-weight:700;line-height:45px;text-align:center;background-color:#000;opacity:0.6;filter:alpha(opacity = 60);}.carousel-bnt-left{left:5px;}.carousel-bnt-right{right:5px;}.carousel-bnt:hover{opacity:1;filter:alpha(opacity=100);}";
            for(var i = 0, dot = new String() ;i < len ;i++)
                dot = dot + "<span class='carousel-dot' data-index='"+ i +"'></span>";
            var component = "<div class='carousel-nav-dots-wrap'>" +
                            dot +
                             "</div><div class='carousel-bnt carousel-bnt-left'>&lt;</div><div class='carousel-bnt carousel-bnt-right'>&gt;</div>";
            if(JSON.stringify($("#carousel-style"))=="{}") $("head").append(s);
            $(".carouselBox").append(component);
            t.find("ul").addClass("carousel-ul").css("left","0");
            t.find("li").addClass("carousel-li");
            t.find(".carousel-dot").eq(0).addClass("carousel-dot-on");
            /*给轮播图盒子中的ul 和 li 添加格式*/
        },
        invoke:function (n) {
            var t = this.target,
                len = this.config.img_num,
                loop = this.loop,
                dots = t.find(".carousel-dot");
            dots.eq(loop).removeClass("carousel-dot-on");
            loop = loop + n;
            if(loop > (len -1)) loop = 0;
            else if(loop < 0) loop = len-1;
            this.loop = loop;
            len = -(loop * this.config.box_w) + "px";
            t.find("ul").css("left",len);
            dots.eq(loop).addClass("carousel-dot-on");
        },
        autoPlay:function () {
            var _this = this;
            this.timer = setInterval(function () {
                _this.invoke(1);
            },this.config.speed)
        },
        bntClick:function () {
            var t = this.target,
                _this = this,
                bnt = t.find(".carousel-bnt");
            t.hover(function () {
                bnt.css("display","block");
                clearInterval(_this.timer)
            },function () {
                bnt.css("display","none");
                _this.autoPlay();
            });
            bnt.bind("click",function () {
                if($(this).hasClass("carousel-bnt-right")) t = 1;
                else t = -1;
                _this.invoke(t);
            })
        },
        dotInvoke:function () {
            var _this = this,n,
                dots = this.target.find(".carousel-dot");
            dots.bind(_this.config.trigger_type,function () {
                n = $(this).attr("data-index") - _this.loop;
                _this.invoke(n);
            })
        }
    };
    window.Carousel = Carousel;
})();